<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <link rel="stylesheet" type="text/css" href="css/carousel/tango/skin.css"/>
        <link rel="stylesheet" type="text/css" href="css/rgenerales.css"/>
        <link rel="stylesheet" type="text/css" href="css/menu/menu.css"  />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/explorer8.css"/>
        <![endif]-->
        <script type="text/javascript" src="js/jquery/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="js/jquery/jquery-ui-1.8.10.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-plugins/jquery.jcarousel.min.js"></script>
        <script type="text/javascript" src="js/jquery-plugins/jquery-menu.js"></script>
        <script type="text/javascript" src="js/jquery-plugins/jquery.easing.1.3.js"></script>

        <title>desgrabadores.com</title>
     </head>

    <body>
<!--            <div id="encabezado">
                <img src="img/encabezado.png" width="1167" height="162"/>
                <div id="botonerasuperior">
                    <a href=""><img src="img/botonerasuperior/botonerasup_inic.png" width="177" height="58" /></a>
                    <a href=""><img src="img/botonerasuperior/botonerasup_qien.png" width="177" height="58" /></a>
                    <a href=""><img src="img/botonerasuperior/botonerasup_serv.png" width="177" height="58" /></a>
                    <a href=""><img src="img/botonerasuperior/botonerasup_ctact.png" width="185" height="58" /></a>
                </div>
            </div>-->
        <div id="encabezado">
            <img src="img/encabezado.png" width="1167" height="162"/>
            <div id="menu">
                <ul class="menu">
                    <!--li><a href="#" class="parent"><span>Home</span></a></li-->
                    <li><a href="#" class="parent" onclick="openCarousel()"><img src="img/botonerasuperior/botonerasup_inic.png" width="177" height="58" /></a></li>
                    <li><a href="#" class="parent" onclick="openQuiSom()"><img src="img/botonerasuperior/botonerasup_qien.png" width="177" height="58" /></a></li>
                    <li><a href="#" class="parent"><img src="img/botonerasuperior/botonerasup_serv.png" width="177" height="58" /></a>
                        <ul>
                            <li><a href="#" onclick="showServicio(0)"><img src="img/desplegable/desgrabaciones_s1.png" alt=""></a></li>
                            <li><a href="#" onclick="showServicio(1)"><img src="img/desplegable/presentaciones_s1.png" alt=""></a></li>
                            <li><a href="#" onclick="showServicio(2)"><img src="img/desplegable/traducciones_s1.png" alt=""></a></li>
                            <li><a href="#" onclick="showServicio(3)"><img src="img/desplegable/videoscorporativos_s1.png" alt=""></a></li>
                        </ul>
                    </li>
                    <li id="liContacto"><a href="#" class="parent" onclick="openDialog();"><img src="img/botonerasuperior/botonerasup_ctact.png" width="177" height="58"></a></li>
                </ul>
                <div id="contacto">
                    
                    <?
                        include('includes/contacto.html')
                     ?>
                </div>
             </div>
        </div>

        <div id="cuerpo">
            <? include('includes/carousel.html');
            ?>

        </div>
        
        <div id="pie">
            <?
                include("includes/pie.html")
                //include("includes/pieChico.html")
            ?>
        </div>

        <div><a href="http://apycom.com/"></a></div>



    </body>

    <script>

        $(document).ready(function() {

            mostrarCarousel();
            prepararDialog();
            $('ul ul').css({'left':"1px"}); //un arreglo

        });

        function mostrarCarousel(){

            $('#mycarousel').jcarousel({
                auto: 10,
                wrap: 'circular',
                initCallback: mycarousel_initCallback,
                //itemFirstInCallback:mycarousel_itemVisibleInCallback,
                scroll:1
            });

            //carousel = $('#mycarousel').data('jcarousel');

        }

        function mycarousel_initCallback(carousel)
       {
           // Disable autoscrolling if the user clicks the prev or next button.
           carousel.buttonNext.bind('click', function() {
               carousel.startAuto(0);
           });

           carousel.buttonPrev.bind('click', function() {
               carousel.startAuto(0);
           });

           // Pause autoscrolling if the user moves with the cursor over the clip.
           carousel.clip.hover(function() {
               carousel.stopAuto();
           }, function() {
               carousel.startAuto();
           });
       }

        function openDialog(){

            if(!$('#contacto').dialog('isOpen')){

                $('#contacto').dialog('open');
                $('.ui-dialog').css({top:109});
            }
            else{

                closeDialog();
                }
            return false;
        }

        function prepararDialog(){

            $('#contacto').dialog({ width: 241,height:487,position:[883,100],autoOpen: false, closeText: '',hide:'slide' });

        }

        function closeDialog(){

            $('#contactData')[0].reset();
            $('#contacto').dialog('close');
            return false;
        }

        function showServicio(servicioId){

            unloadCarousel();
            $("#cuerpo").load("includes/servicios.php",{servicioId:servicioId},function(){

                incluirPieChico(null);
                switch(servicioId){
                case 0:
                        $("div#mail").css({'margin-top':-41,'margin-left':440});
                        break;
                case 1:
                        $("div#mail").css({'margin-top':-41,'margin-left':496});
                        break;
                case 2:
                        $("div#mail").css({'margin-top':-43,'margin-left':496});
                        break;
                case 3: 
                        $("div#mail").css({'margin-top':-53,'margin-left':496});
                        break;
                }

                return false;
            })
        }

        function openCarousel(){

            unloadCarousel();
            $("#cuerpo").load("includes/carousel.html",function(){
                mostrarCarousel();
                incluirPieGrande();
                return false;
            });

        }

        function openQuiSom(){

            unloadCarousel();
            $("#cuerpo").load("includes/quienesSom.html",function(){

                incluirPieChico(192);

            });
        }

        function incluirPieChico(margin_top){

            $("#pie").load("includes/pieChico.html",function(){
                if (margin_top !=null){
                    $("div#botonerainferior_chica").css({'margin-top':margin_top})
                }
            })
        }

        function incluirPieGrande(){

            $("#pie").load("includes/pie.html")
        }

        function unloadCarousel(){

            if( myCarousel = $("#mycarousel").data('jcarousel')) {
                myCarousel.stopAuto()
                myCarousel.reset();
            }
        }

        function submitForm(){

            var nombre = $("#nombre").val();
            var mail = $("#mail").val();
            var coment = $("#comentario").val();

            if(nombre!="" && mail!="" && coment!=""){

                var data = $("#contactData").serialize(); //arma todo los input del #form para enviar en el request
                $.ajax({
                    type: "POST",
                    url: "/includes/mail.php",
                    data:data,
                    success: function(){
                            $('#contactData')[0].reset();
                            $( "#contacto" ).dialog( "close" );
                        }
                 })

             }
            return false;
	 }



    </script>
    
</html>
